<template>
  <div class="myForm">
    <div class="searchForm">
      <nav-tabs
        v-if="isShowNavTabs"
        :navTabs="navTabs"
        :defaultIdx="defaultIdx"
        @navTabsChange="navTabsChange"
      />
      <div class="form" :class="{ widthFull: !isShowNavTabs }">
        <template v-if="isShowInlineBtnGroup">
          <div class="btnGroup">
            <el-button
              :size="formItemSize"
              type="info"
              icon="el-icon-plus"
              @click="added"
              >新增</el-button
            >
            <el-button
              v-if="isShowBatchDelete"
              :size="formItemSize"
              type="info"
              icon="el-icon-delete-solid"
              @click="batchDelete"
              >批量删除</el-button
            >
            <slot name="moreBtn"></slot>
          </div>
        </template>
        <el-form
          :class="{ flexOne: !isShowNavTabs }"
          :label-width="labelWidth"
          ref="formRef"
          :inline="inline"
          :model="formData"
          :rules="rules"
        >
          <template v-for="item in formItems">
            <el-form-item
              :key="item.label"
              :label="item.label"
              :style="itemStyle"
              :prop="item.field || ''"
              v-if="!item.isHidden"
            >
              <!-- 如果是输入框/密码 -->
              <template
                v-if="item.type === 'input' || item.type === 'password'"
              >
                <el-input
                  class="myInputStyle"
                  v-bind="item.moreOptions"
                  :placeholder="item.placeholder"
                  :size="formItemSize"
                  clearable
                  v-model="formData[item.field]"
                  :show-password="item.type === 'password'"
                />
              </template>
              <!-- 如果是数字输入框 -->
              <template v-if="item.type === 'numberInput'">
                <el-input
                  v-bind="item.moreOptions"
                  :placeholder="item.placeholder"
                  :size="formItemSize"
                  v-model.number="formData[item.field]"
                >
                </el-input>
              </template>

              <!-- 如果是下拉框 -->
              <template v-if="item.type === 'select'">
                <el-select
                  style="width: 100%"
                  :size="formItemSize"
                  :placeholder="item.placeholder"
                  v-bind="item.moreOptions"
                  v-model="formData[item.field]"
                >
                  <template v-for="options in item.selectOptions">
                    <el-option
                      :key="options.value"
                      :label="options.label"
                      :value="options.value"
                    ></el-option>
                  </template>
                </el-select>
              </template>

              <!-- 如果是时间段选择 -->
              <template v-if="item.type === 'datePicker'">
                <el-date-picker
                  class="datePickerStyle"
                  style="width:100%;"
                  :size="formItemSize"
                  :type="datePickerType"
                  v-bind="item.moreOptions"
                  :value-format="valueFormat"
                  v-model="formData[item.field]"
                >
                </el-date-picker>
              </template>
            </el-form-item>
          </template>
        </el-form>

        <el-button :size="formItemSize" type="info" @click="search"
          >查询</el-button
        >
        <el-button :size="formItemSize" type="info" @click="reset"
          >重置</el-button
        >
      </div>
    </div>
    <template v-if="isShowLinefeedBtnGroup">
      <slot name="linefeed">
        <el-button
          :size="formItemSize"
          type="info"
          icon="el-icon-plus"
          @click="added"
          >新增</el-button
        >
        <el-button
          v-if="isShowBatchDelete"
          :size="formItemSize"
          type="info"
          icon="el-icon-delete-solid"
          @click="batchDelete"
          >批量删除</el-button
        >
        <slot name="linefeedMoreBtn"></slot>
      </slot>
    </template>
  </div>
</template>

<script>
import navTabs from "@/components/navTabs/navTabs.vue";
export default {
  components: { navTabs },
  props: {
    // 是否显示NavTabs
    isShowNavTabs: {
      type: Boolean,
      default: true
    },
    // tab切换的内容
    navTabs: {
      type: Array,
      default: () => []
    },
    defaultIdx: {
      type: Number,
      default: 0
    },
    // 是否显示同行的增加与删除按钮
    isShowInlineBtnGroup: {
      type: Boolean,
      default: true
    },
    // 如不需要行内的增加与删除 是否需要换行的增加与删除按钮？
    isShowLinefeedBtnGroup: {
      type: Boolean,
      default: false
    },
    // 新增按钮的路由跳转路径
    routerSkip: {
      type: Object,
      default: () => ({})
    },
    // 是否显示批量删除按钮
    isShowBatchDelete: {
      type: Boolean,
      default: true
    },

    // 表单数据相关的props
    // form表单配置项 数组类型
    formItems: {
      type: Array,
      required: true
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => ({})
    },
    //  formItem的样式
    itemStyle: {
      type: Object,
      default: () => ({})
    },
    // form表单item的大小
    formItemSize: {
      type: String,
      default: "mini"
    },
    // 是否行内
    inline: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: ""
    },
    // 时间选择的value格式
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd"
    },
    // 时间选择的type
    datePickerType: {
      type: String,
      default: "daterange"
    }
  },
  data() {
    return {
      formData: {},
      defaultData: {}
    };
  },
  mounted() {
    this.initFormData();
    this.initStyle();
  },
  methods: {
    // 初始化搜索数据
    initFormData() {
      // 根据配置项来动态生成表单数据双向绑定所需要的数据源
      this.formItems.forEach(item => {
        this.defaultData[item.field] = "";
      });
      this.formData = { ...this.defaultData };
    },

    // 初始化行内样式 修改form宽度
    initStyle() {
      if (this.inline) {
        this.$nextTick(() => {
          this.changeElClass(".myInputStyle", "inputWidthClass");
          this.changeElClass(".datePickerStyle", "datePickerWidthClass");
        });
      }
    },
    // 封装改变元素样式函数
    changeElClass(className, addClassName) {
      const els = document.querySelectorAll(className);
      els.forEach(item => {
        const parentClass = item.parentNode.getAttribute("class");
        const newClass = parentClass + " " + addClassName;
        item.parentNode.setAttribute("class", newClass);
      });
    },
    // tabs改变
    navTabsChange(i) {

      this.$emit("navTabsChange", i);
    },
    // 点击新增时
    added() {
      this.$emit("added");
      if (this.routerSkip && this.routerSkip.path) {
        this.$router.push({
          path: this.routerSkip.path,
          query: {
            ...this.routerSkip.query
          },
          params: {
            ...this.routerSkip.params
          }
        });
      }
    },
    // 点击批量删除
    batchDelete() {
      this.$emit("batchDelete");
    },
    // 点击搜索
    search() {
      // 如果需要规则验证
      if (Object.keys(this.rules).length > 0) {
        this.$refs.formRef.validate(falg => {
          if (falg) this.$emit("search", { ...this.formData });
        });
      } else {
        this.$emit("search", { ...this.formData });
      }
    },
    // 点击重置
    reset() {
      // this.$refs.formRef.resetFields();//数据会变成undefined
      this.formData = { ...this.defaultData };
      this.$emit("search", { ...this.formData });
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin flexLayout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.myForm {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 30px;
  margin-right: 10px;
  .searchForm {
    @include flexLayout;
    .navTabs {
      display: flex;
      align-items: center;
      background-color: rgba(219, 219, 219, 100);
      .activeTabs {
        background-color: #fff;
        border: 1px solid rgba(0, 176, 158, 100);
      }
      .tabs {
        padding: 10px 35px;
        cursor: pointer;
      }
    }
    .form {
      display: flex;
      align-items: center;
      .btnGroup {
        margin-right: 10px;
      }
      /deep/ .el-form--inline {
        margin: 10px 10px 0px 0px;
        .el-form-item__content {
          width: 160px;
        }
      }
    }
  }
}

.widthFull {
  width: 100% !important;
}
.flexOne {
  flex: 1;
}

/deep/ .el-button--info {
  color: #101010;
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}

// 手动修改行内input的宽度
/deep/ .inputWidthClass {
  width: 180px !important;
}
/deep/ .datePickerWidthClass {
  width: 200px !important;
}

/deep/ .el-form--inline .el-form-item__content {
  vertical-align: baseline !important;
}

/deep/ input::-webkit-input-placeholder {
  font-size: 10px;
}
/deep/ input::-moz-input-placeholder {
  font-size: 10px;
}
/deep/ input::-ms-input-placeholder {
  font-size: 10px;
}
</style>
